<template>
  <div
    v-if="utilList.length"
    class="content-util"
  >
    <div
      class="content-title"
      :title="utilTitle"
    >
      {{ utilTitle }}
    </div>
    <div class="content-unit-wrapper">
      <div
        v-for="item in utilList"
        :key="`${item.link_type}-${item.download_url}`"
        :class="`content-unit ${item.description ? '':'empty'}`"
        @click="clickItem(item)"
      >
        <div class="content-top">
          <img
            class="content-img"
            :src="item.logo"
          >
          <div
            class="content-title"
            :title="item.title"
          >
            {{ item.title }}
          </div>
        </div>
        <div
          v-if="item.description"
          class="content-desc"
          :title="item.description"
        >
          {{ item.description }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFirstCatalogData } from '@/stores/first-catalog-data'
import { storeToRefs } from 'pinia';
import { invokeAsyncAPi } from '@/utils/xz-fn'
import { parseJSONstr } from '@/utils'

const firstCatalogDataStore = useFirstCatalogData();
const { utilList, utilTitle } = storeToRefs(firstCatalogDataStore)

const emit = defineEmits(['download'])


const clickItem = (item:any) => {
  if (item.link_type === '1') {//跳转
    invokeAsyncAPi('fq_open_url',parseJSONstr(item.download_url).url)
  } else if (item.link_type === '2') {//下载
    const _item = {
      ...parseJSONstr(item.download_url),
      icon: item.logo,
      _type:'util'
    }
    emit('download',_item )
  }
}
</script>

<style scoped lang="scss">
.content-util{
  padding:10px 16px 10px 16px;
  position: absolute;
  left: 174px;
  right:10px;
  top: 444px;
  bottom: 36px;
  // height:112px;
  background: #F9F9F9;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.05);
  .content-title{
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 14px;
    color: #192655;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }
  .content-unit-wrapper{
    display: flex;
    gap:10px;
    margin-top:5px;
    flex-wrap: wrap;
    overflow: auto;
    max-height:80px;
    padding-bottom: 10px;
    .content-unit{
      width:148px;
      background:#fff;
      height:74px;
      padding:12px 16px 0 16px;
      cursor: pointer;
      .content-top{
        display: flex;
        align-items: center;
        gap:7px;
        margin-bottom: 8px;
        .content-img{
          width:24px;
          height:24px;
        }
      }
      .content-desc{
        font-weight: 400;
        font-size: 12px;
        color: #192655;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; 
      }
      &.empty{
        height:40px;
      }
    }
  }
}
</style>